<template>
  <div id="map" class="map"></div>
</template>

<script setup lang="ts">
import maps from '@/assets/js/map.js'
import { onMounted } from 'vue'

let map: any = null

function initMap() {
  maps.then(async () => {
    const BM = window.BM
    BM.Config.HTTP_URL = 'http://' + window.location.hostname + ':9000'
    map = BM.map('map', null, {
      crs: BM.CRS.EPSG4326,
      center: [30.6477, 111.3403],
      zoom: 9,
      zoomControl: true,
      attributionControl: true,
      maxZoom: 17
    })

    // 创建一个layergroup
    const layerGroup = new BM.LayerGroup()

    // 创建多个tileLayer
    const layers = [
      'bigemap.19h394ne',
      'bigemap.amn17j8j',
      'bigemap.7a3a4j3c',
      'bigemap.2mz5fb8e',
      'bigemap.347rk3d6',
      'bigemap.3du542gl',
      'bigemap.47nmbjue',
      'bigemap.5tn99i9j',
      'bigemap.5yhn8ge2',
      'bigemap.6qnk7ndq',
      'bigemap.7592xq3r',
      'bigemap.9ejsknhv',
      'bigemap.ax95ce4u',
      'bigemap.btlcvu3z',
      'bigemap.clbtsnzf',
      'bigemap.dwg4m893',
      'bigemap.632zod70',
      'bigemap.drnnpjz6',
      'bigemap.a05kkz6l'
    ].map(function (tileUrl) {
      return BM.tileLayer(tileUrl)
    })

    // 将所有的tileLayer添加到layergroup中
    layers.forEach(function (layer) {
      layerGroup.addLayer(layer)
    })
    const baseLayers = {
      主地图: layerGroup
    }
    BM.control.layers(baseLayers).addTo(map)
    map.addLayer(layerGroup)
  })
}

onMounted(() => {
  initMap()
})
</script>
<style lang="less" scoped>
.map {
  height: calc(100vh - var(--tags-view-height) - var(--top-tool-height) - 40px);
}
</style>
